<template>
  <div>
    <common-head title="订单页"/>
    <div class="wrap">
      <van-contact-card
        :name="contact.linkMan"
        :tel="contact.mobile"
        :type="contactType"
        @click="choseContact" />
        <div class="items">
          <van-card
            v-for="item in items"
            :key="item.id"
            :num="item.number"
            :price="item.price"
            :title="item.name"
            :thumb="item.pic"
          />
        </div>
    </div>
    <!-- 确认订单 -->
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit" />
    <!-- /确认订单 -->
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead'
import { getToken } from '_utils'
import { fetchCartInfo, getDefaultContact } from '_api'
export default {
  data () {
    return {
      // 订单收货人
      contact: {
        linkMan: '',
        mobile: ''
      },
      // 购买的商品
      items: [],
      contactType: 'add',// 联系人卡片状态
      total: 0
    }
  },
  created () {
    this.fetchContact()
    this.fetchItems()
  },
  methods: {
    choseContact () {
      /*
        点击联系人卡片
          1 没有联系人  进入 增加联系人页面
          2 有联系人 进入联系人列表 切换收货人
      */
      if (this.contactType === 'add') {
        this.$router.push('/contactAdd')
      } else {
        this.$router.push('/contactLists')
      }
    },
    onSubmit () {
      // 确认订单 到支付页面
    },
    // 获取收货人
    fetchContact () {
      getDefaultContact({
        token: getToken()
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) { //
          this.contact = res.data.data.info
          this.contactType = 'edit'
        }
        if (res.data.code === 700) {  // 没有收货人
          this.contactType = 'add'
        }
      })
    },
    fetchItems () {
      // 获取订单商品列表
      fetchCartInfo({
        token: getToken() 
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items.filter(item => item.selected)/* 获取商品信息 */
          this.total = res.data.data.price/* 获取价格 */
        }
      })
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 50px;
}
</style>
